<template>
	<view class="wrap safe-area flex column">
		<view class="wrap-choose-location flex column">
			<view class="title f-26">定位地址</view>

			<view class="location-choose flex column">
				<view class="location flex align-center just-center" @click="onChooseLocation">
					<image class="img" :src="$staticImagePath('home/location.png')" />

					<view class="f-28">{{
						locationInfo === null
							? "定位中"
							: `${locationInfo.province} ${locationInfo.city} ${locationInfo.district}`
					}}</view>
				</view>

				<view class="choose flex align-center just-center" @click="onChooseThree">
					<view class="f-28">{{
						chooseInfo.province === ""
							? "请选择"
							: `${chooseInfo.province} ${chooseInfo.city} ${chooseInfo.district}`
					}}</view>
				</view>
			</view>
		</view>

		<view class="wrap-three-bg flex column">
			<view class="three-tab flex align-center">
				<view class="tab-item f-28 limit-num-line" :class="current === 0 ? 'active' : ''" @click="onTab(0)">
					{{ chooseInfo.province === "" ? "请选择" : chooseInfo.province }}

					<view class="line" v-if="current === 0"></view>
				</view>

				<view
					class="tab-item f-28 limit-num-line"
					:class="current === 1 ? 'active' : ''"
					v-if="chooseInfo.province !== ''"
					@click="onTab(1)"
				>
					{{ chooseInfo.city === "" ? "请选择" : chooseInfo.city }}

					<view class="line" v-if="current === 1"></view>
				</view>

				<view
					class="tab-item f-28 limit-num-line"
					:class="current === 2 ? 'active' : ''"
					v-if="chooseInfo.province !== '' && chooseInfo.city !== ''"
					@click="onTab(2)"
				>
					{{ chooseInfo.district === "" ? "请选择" : chooseInfo.district }}

					<view class="line" v-if="current === 2"></view>
				</view>
			</view>

			<scroll-view scroll-y class="three-list">
				<block v-for="(item, index) in showList" :key="index">
					<view class="item flex align-center" @click="onChoose(item)">
						<text class="f-30" :class="onJudgeListChoose(item) ? 'active' : ''">{{ item.name }}</text>

						<image
							class="choose"
							v-if="onJudgeListChoose(item)"
							:src="$staticImagePath('common/choose_dh.png')"
						/>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getAreaList } from "@/API/common.js";
	import Location from "@/utils/location.js";
	import event from "@/utils/event.js";
	export default {
		data() {
			return {
				locationInfo: null,

				chooseInfo: {
					lat: "",
					lng: "",
					address: "",
					province: "",
					city: "",
					district: "",
					street: "",
					status: "success",
				},

				current: 0,
				provinceList: [], //省
				cityList: [], //市
				areaList: [], //区

				list: [],
				showList: [],
			};
		},
		onLoad() {
			this.getData();
			this.onLocation();
		},
		methods: {
			/**
			 * 定位
			 */
			onLocation() {
				Location.getLocation((obj) => {
					this.locationInfo = obj;
				});
			},
			/**
			 * tab选择
			 */
			onTab(index) {
				this.current = index;

				if (index === 0) {
					this.showList = this.provinceList;
				} else if (index === 1) {
					this.showList = this.cityList;
				} else if (index === 2) {
					this.showList = this.areaList;
				}
			},

			/**
			 * 三级联动选择
			 */
			onChoose(item) {
				switch (this.current) {
					case 0:
						this.chooseInfo.province = item.name;
						this.chooseInfo.city = "";
						this.chooseInfo.district = "";
						this.cityList = item.children;
						this.areaList = [];

						setTimeout(() => {
							this.current = 1;
							this.showList = item.children;
						}, 500);
						break;
					case 1:
						this.chooseInfo.city = item.name;
						this.chooseInfo.district = "";
						this.areaList = item.children;

						setTimeout(() => {
							this.current = 2;
							this.showList = item.children;
						}, 500);
						break;
					case 2:
						this.chooseInfo.district = item.name;
						break;
				}
			},
			/**
			 * 判断
			 */
			onJudgeListChoose(item) {
				var isChoose = false;

				if (this.current === 0) {
					if (this.chooseInfo.province === item.name) {
						return true;
					} else {
						return false;
					}
				} else if (this.current === 1) {
					if (this.chooseInfo.city === item.name) {
						return true;
					} else {
						return false;
					}
				} else if (this.current === 2) {
					if (this.chooseInfo.district === item.name) {
						return true;
					} else {
						return false;
					}
				}

				return isChoose;
			},
			/**
			 * 选择定位信息
			 */
			onChooseLocation() {
				if (this.locationInfo.status === "fail") {
					this.$st.show("请打开定位信息");
					return;
				}
				this.onSure(this.locationInfo);
			},
			/**
			 * 选择三级联动的地址
			 */
			onChooseThree() {
				if (this.chooseInfo.province === "") {
					this.$st.show("请选择省份");
					return;
				}
				if (this.chooseInfo.city === "") {
					this.$st.show("请选择城市");
					return;
				}
				if (this.chooseInfo.district === "") {
					this.$st.show("请选择地区");
					return;
				}
				this.onSure(this.chooseInfo);
			},

			/**
			 * 确认选择
			 */
			onSure(obj) {
				this.$stoarge.setChangeCity(obj);
				event.emit("onSureChooseCity", obj);
				uni.navigateBack();
			},

			/**
			 * 网络请求
			 */
			getData() {
				getAreaList().then((res) => {
					this.list = res.data;
					this.provinceList = res.data;
					this.showList = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		height: 100vh;
		overflow: hidden;

		.wrap-choose-location {
			width: 100%;
			padding: 30rpx;
			overflow: hidden;
			box-sizing: border-box;
			background-color: #f6f6f6;
			gap: 20rpx;

			.title {
				color: #888888;
			}

			.location-choose {
				width: 100%;
				gap: 20rpx;
				overflow: hidden;

				.location {
					padding: 0 25rpx;
					height: 60rpx;
					border-radius: 10rpx;
					overflow: hidden;
					width: fit-content;
					gap: 20rpx;
					color: #121212;
					border: 2rpx solid #121212;

					.img {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.choose {
					padding: 0 25rpx;
					height: 60rpx;
					border-radius: 10rpx;
					overflow: hidden;
					width: fit-content;
					gap: 20rpx;
					color: #121212;
					border: 2rpx solid #121212;
				}
			}
		}

		.wrap-three-bg {
			width: 100%;
			flex: 1;
			overflow: hidden;
			background-color: white;

			.three-tab {
				width: 100%;
				overflow: hidden;
				padding: 0 20rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #eeeeee;

				.tab-item {
					--limit-num: 1;
					width: 33.333%;
					height: 100rpx;
					overflow: hidden;
					line-height: 100rpx;
					text-align: center;
					color: #121212;
					position: relative;

					.line {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 1rpx;
						width: 120rpx;
						height: 6rpx;
						border-radius: 3rpx;
						background: $theme-gradit-color;
					}
				}
			}

			.three-list {
				width: 100%;
				flex: 1;
				overflow: hidden;
				padding: 20rpx 40rpx;
				box-sizing: border-box;

				.item {
					width: 100%;
					height: 60rpx;
					overflow: hidden;
					color: #121212;
					gap: 25rpx;

					.choose {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.active {
			color: $theme-color !important;
		}
	}
</style>
